<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单提交</title>
    <!-- css -->
    <link rel="stylesheet" href="/fk-acti/formjs/cdn/element-ui/theme-chalk/index.css">
    <!-- babel -->
    <script src="/fk-acti/resource/babel/babel-browser.min.js"></script>
    <!-- vue -->
    <script src="/fk-acti/formjs/cdn/vue/vue.min.js"></script>
    <!-- element-ui js -->
    <script src="/fk-acti/formjs/cdn/element-ui/index.js"></script>
    <!-- axios -->
    <script src="/fk-acti/formjs/cdn/axios/axios.min.js"></script>
    <!-- avue -->
    <script src="/fk-acti/formjs/cdn/avue/avue.min.js"></script>
    <style>
	.el-select{
		width: 100%;
	}
	.readonlyForm{
		width:100%;
		frameborder:0;
		border:0;
	}
	
	</style>
	<!-- jquery -->
    <script src="/fk-acti/web/resource/js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="./rejectAvanceJs.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    var formVue;
  	//获取地址栏参数值
    function getUrlParam(name) {
    	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); // 构造一个含有目标参数的正则表达式对象
    	var r = window.location.search.substr(1).match(reg); // 匹配目标参数
    	if (r != null){
    		return decodeURIComponent(r[2]);
    	}
    	return null; //返回参数值
    }
  	
  	//加载每一个表单
  	function loadOneForm(form){
  		var iframe = "<iframe class='readonlyForm' onload='reinitIframe(this)' src='@src' ></iframe>"
  		var src = "./form-read.html?form_val_kid=" + form.kid;
  		iframe = iframe.replace('@src',src);
  		$("#form-reads").append(iframe);
  	}
  	function reinitIframe(thiz){
  		var iframe = thiz;
  		console.log(iframe);
        try{
            var bHeight = iframe.contentWindow.document.body.scrollHeight;
            var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
            var height = Math.min(bHeight, dHeight);
            iframe.height = height+20;
            // console.log(iframe.height);
        }catch (ex){
        	console.log(ex);
        }
  	}
  	//加载以往的只读表单
	function loadFormReads(){
		var url = '/fk-acti/form/vals/get_forms?task_id='+getUrlParam('task_id');
  		$.ajax({
  			    url:url,
  			    dataType:"json",
  			    // async:false,
  			    type:"get",
  			    success:function(data){
 	 				if(data.code!=200){
  						alert('服务器正忙,请稍后再试.');			
  						return;
  					}
 	 				var formList = data.result;
 	 				console.log(formList);
 	 				if(!formList || formList.length==0){
 	 					return;
 	 				}
 	 				for(var i=0;i<formList.length;i++){
						console.log(formList[i]);
						loadOneForm(formList[i]);
 	 				}
  			    }
  			});
	}  	
  	$(function(){
  		loadFormReads();
  	});
  	
  	var formData = {};
    function loadFormData(){
  		var url = '/fk-acti/form/json/get_json_new?task_id='+getUrlParam('task_id');
  		$.ajax({
  			    url:url,
  			    dataType:"json",
  			    async:false,
  			    type:"get",
  			    success:function(data){
  					if(data.code==200){
  						formData = data.result;
  					}
  			    }
  			});
  		
  		var form_json_str = formData.form;
		var form_values = formData.values;
		console.log(form_values);

		if(!form_json_str){
			form_json_str = {};
		}
		if(!form_values){
			form_values = {};
		}
		// console.log(form_json_str);
		var form_json = JSON.parse(form_json_str.json);
		// 注入高级代码
		form_json = rejectAdvanceJs(form_json,form_json_str.json_eval);

		formData.form = form_json;
		// 设置初始值
		if(typeof(form_values)=='string'){
			formData.values = JSON.parse(form_values);
		}else{
			formData.values = form_values;
		}
  		return formData;
  	}
    </script>

</head>

<body>
	<div id="form-reads">
	</div>
    <div id="app">
        <avue-form :option="option" v-model="form" @submit="handleSubmit">
        	<template slot-scope="scope" slot="menuForm">
      			<el-button @click="saveDoc"><i class="el-icon-edit-outline"></i> 保存草稿</el-button>
  			</template>
        </avue-form>
    </div>

<script type="text/babel">
	var formData = loadFormData();
	console.log(formData.values);
	console.log(formData.form);

	var urlSubmit = '/fk-acti/form/workflow/submit';
	var urlSaveDoc = '/fk-acti/form/workflow/saveDoc';
	// formData.values.verify="1";
formVue = new Vue({
        el: "#app",
        data() {
            return {
                form: formData.values,
                option: formData.form
            }
        },
        created() {
		},
        methods: {
			saveDoc(){
				var thiz = this;
				var form = thiz.form;
				console.log(JSON.stringify(form));
				axios({
					method: 'post',
					url: urlSaveDoc,
					data: {
						task_id: getUrlParam('task_id'),
						form: JSON.stringify(form)
					}
				})
				.then(function (response) {
					if(response.data.code==200){
						thiz.$message.success(response.data.result);
					}else{
						thiz.$message.error(response.message);
					}
				})
				.catch(function (error) {
					console.log(error);
				});
        	},
            handleSubmit(form, done) {
				var thiz = this;
				console.log(form);
				axios({
					method: 'post',
					url: urlSubmit,
					data: {
						task_id: getUrlParam('task_id'),
						form: JSON.stringify(form)
					}
				})
				.then(function (response) {
					console.log(response);
					if(response.data.code==200){
						thiz.$message.success(response.data.result);
						thiz.option.menuBtn = false;
						// window.close();
	                    // done()

					}else{
						thiz.$message.error(response.message);
					}
				})
				.catch(function (error) {
					console.log(error);
				});
            } // handleSubmit
        }
    });
</script>
</body>
</html>